<!doctype html>
<html>

<head>
  <!-- css文件 -->
  {include file="public/title" /}
</head>

<body data-type="index">
  <!-- 头部 -->
  {include file="public/header" /}
  <div class="tpl-page-container tpl-page-header-fixed">
    <!-- 左侧导航 -->
    {include file="public/leftNav" /}
    <div class="tpl-content-wrapper">

      <ol class="am-breadcrumb">
        <li><a href="#" class="am-icon-home">首页</a></li>
        <li><a href="#">统计</a></li>
        <li class="am-active">内容</li>
      </ol>

      <div class="row">
        <div class="am-u-lg-3 am-u-md-6 am-u-sm-12">
          <div class="dashboard-stat blue">
            <div class="visual">
              <i class="am-icon-comments-o"></i>
            </div>
            <div class="details">
              <div class="number"> {$users} </div>
              <div class="desc"> 会员总数 </div>
            </div>
            
          </div>
        </div>

        <div class="am-u-lg-3 am-u-md-6 am-u-sm-12">
          <div class="dashboard-stat red">
            <div class="visual">
              <i class="am-icon-bar-chart-o"></i>
            </div>
            <div class="details">
              <div class="number"> {$user} </div>
              <div class="desc"> 新增会员 </div>
            </div>
            
          </div>
        </div>
        <div class="am-u-lg-3 am-u-md-6 am-u-sm-12">
          <div class="dashboard-stat green">
            <div class="visual">
              <i class="am-icon-apple"></i>
            </div>
            <div class="details">
              <div class="number"> {$years} </div>
              <div class="desc"> 全年收支 </div>
            </div>
          </div>
        </div>
        <div class="am-u-lg-3 am-u-md-6 am-u-sm-12">
          <div class="dashboard-stat purple">
            <div class="visual">
              <i class="am-icon-android"></i>
            </div>
            <div class="details">
              <div class="number"> {$totals} </div>
              <div class="desc"> 本月收支 </div>
            </div>
          </div>
        </div>
      </div>

      <div class="row">

        <div class="am-u-lg-3 am-u-md-6 am-u-sm-12">
          <div class="dashboard-stat blue">
            <div class="visual">
              <i class="am-icon-comments-o"></i>
            </div>
            <div class="details">
              <div class="number"> {$incomes} </div>
              <div class="desc"> 本月收入 </div>
            </div>
          </div>
        </div>

        <div class="am-u-lg-3 am-u-md-6 am-u-sm-12">
          <div class="dashboard-stat red">
            <div class="visual">
              <i class="am-icon-bar-chart-o"></i>
            </div>
            <div class="details">
              <div class="number"> {$finances} </div>
              <div class="desc"> 本月支出 </div>
            </div>
          </div>
        </div>
        <div class="am-u-lg-3 am-u-md-6 am-u-sm-12">
          <div class="dashboard-stat green">
            <div class="visual">
              <i class="am-icon-apple"></i>
            </div>
            <div class="details">
              <div class="number"> {$income} </div>
              <div class="desc"> 今日收入 </div>
            </div>
          </div>
        </div>
        <div class="am-u-lg-3 am-u-md-6 am-u-sm-12">
          <div class="dashboard-stat purple">
            <div class="visual">
              <i class="am-icon-android"></i>
            </div>
            <div class="details">
              <div class="number"> {$finance} </div>
              <div class="desc"> 今日支出 </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="row">
        <div class="am-u-md-12 am-u-sm-12 row-mb">
          <div class="tpl-portlet">
            <div class="tpl-portlet-title">
              <div class="tpl-caption font-green ">
                <i class="am-icon-cloud-download"></i>
                <span> Cloud 收入统计</span>
              </div>
            </div>
            <!--此部分数据请在 js文件夹下中的 app.js 中的 “百度图表A” 处修改数据 插件使用的是 百度echarts-->
            <div class="tpl-echarts" id="tpl-echarts-A">
            </div>
          </div>
        </div>
      </div>
      
    </div>
  </div>
  <!-- js -->
  {include file="public/foot" /}
</body>
<script>
  var pageData = {
    // ===============================================
    // 首页
    // ===============================================
    'index': function indexData() {

        // ==========================
        // 百度图表A http://echarts.baidu.com/
        // ==========================

        var echartsA = echarts.init(document.getElementById('tpl-echarts-A'));
        option = {

            tooltip: {
                trigger: 'axis',
            },
            legend: {
                data: ['本月收入','本月支出']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                boundaryGap: true,
                data: [<?php echo implode(',',$xx)?>]
            }],

            yAxis: [{
                type: 'value'
            }],
            series: [{
              name: '本月收入',
              type: 'line',
              stack: '总量',
              areaStyle: { normal: {} },
              data: [<?php echo implode(',',$ySemData)?>],
              itemStyle: {
                normal: {
                  color: '#32c5d2'
                }
              }
            },
            {
              name: '本月支出',
              type: 'line',
              stack: '总量',
              areaStyle: { normal: {} },
              data: [<?php echo implode(',',$ySeoData)?>],
              itemStyle: {
                normal: {
                  color: '#e7505a'
                }
              }
            }
          ]
        };
        echartsA.setOption(option);
    },
  }
</script>
</html>